<style>
    #febs-avatar img {
        width: 5rem;
        border-radius: 50%;
        margin: .5rem;
        cursor: pointer;
    }

    #febs-avatar .layui-tab-item {
        margin-left: 1rem;
    }
</style>
<div class="layui-tab layui-tab-brief" id="febs-avatar" lay-filter="avatar-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">后田花子</li>
        <li>阿里系</li>
        <li>脸萌</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <img data-th-src="@{febs/images/avatar/1d22f3e41d284f50b2c8fc32e0788698.jpeg}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/2dd7a2d09fa94bf8b5c52e5318868b4d9.jpg}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/2dd7a2d09fa94bf8b5c52e5318868b4df.jpg}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/8f5b60ef00714a399ee544d331231820.jpeg}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/17e420c250804efe904a09a33796d5a10.jpg}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/17e420c250804efe904a09a33796d5a16.jpg}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/87d8194bc9834e9f8f0228e9e530beb1.jpeg}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/496b3ace787342f7954b7045b8b06804.jpeg}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/595ba7b05f2e485eb50565a50cb6cc3c.jpeg}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/964e40b005724165b8cf772355796c8c.jpeg}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/5997fedcc7bd4cffbd350b40d1b5b987.jpg}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/5997fedcc7bd4cffbd350b40d1b5b9824.jpg}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/a3b10296862e40edb811418d64455d00.jpeg}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/a43456282d684e0b9319cf332f8ac468.jpeg}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/bba284ac05b041a8b8b0d1927868d5c9x.jpg}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/c7c4ee7be3eb4e73a19887dc713505145.jpg}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/ff698bb2d25c4d218b3256b46c706ece.jpeg}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/default.jpg}" title="点击更换">
        </div>
        <div class="layui-tab-item">
            <img data-th-src="@{febs/images/avatar/BiazfanxmamNRoxxVxka.png}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/cnrhVkzwxjPwAaCfPbdc.png}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/gaOngJwsRYRaVAuXXcmB.png}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/jZUIxmJycoymBprLOUbT.png}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/ubnKSIfAJTxIgXOKlciN.png}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/WhxKECPNujWoWEFNdnJE.png}" title="点击更换">
        </div>
        <div class="layui-tab-item">
            <img data-th-src="@{febs/images/avatar/20180414165920.jpg}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/20180414165927.jpg}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/20180414165754.jpg}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/20180414165815.jpg}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/20180414165821.jpg}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/20180414165827.jpg}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/20180414165834.jpg}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/20180414165840.jpg}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/20180414165846.jpg}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/20180414165855.jpg}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/20180414165909.jpg}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/20180414165914.jpg}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/20180414165936.jpg}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/20180414165942.jpg}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/20180414165947.jpg}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/20180414165955.jpg}" title="点击更换">
            <img data-th-src="@{febs/images/avatar/20180414170003.jpg}" title="点击更换">
        </div>
    </div>
</div>
<script>
    layui.use(['element', 'jquery', 'febs'], function () {
        var $ = layui.jquery,
            element = layui.element,
            febs = layui.febs,
            $view = $('#febs-avatar');

        $view.find('img').each(function () {
            var $this = $(this);
            $this.on('click', function () {
                var $that = $(this);
                var target_src = $that.attr("src").replace('febs/images/avatar/', '');
                febs.get(ctx + 'user/avatar/' + target_src, null, function () {
                    layui.layer.closeAll();
                    febs.modal.confirm('修改成功','是否马上刷新页面生效？',function () {
                        window.location.reload();
                    });
                })
            })
        })
    });
</script>